<template>
  <view v-if="visible" class="modal">
    <!-- 遮罩层 -->
    <view 
      class="modal__mask"
      :class="{ 'modal__mask--transparent': !showMask }"
      @click="handleMaskClick"
    ></view>
    
    <!-- 模态框内容 -->
    <view 
      class="modal__container"
      :class="[
        `modal__container--${position}`,
        `modal__container--${size}`,
        {
          'modal__container--fullscreen': fullscreen,
          'modal__container--no-padding': !padding
        }
      ]"
      :style="customStyle"
    >
      <!-- 头部 -->
      <view v-if="showHeader" class="modal__header">
        <view class="modal__title">
          <u-icon 
            v-if="icon" 
            :name="icon" 
            :color="iconColor" 
            size="32rpx"
            class="modal__title-icon"
          ></u-icon>
          <text class="modal__title-text">{{ title }}</text>
        </view>
        
        <view v-if="closable" class="modal__close" @click="handleClose">
          <u-icon name="close" size="32rpx" color="var(--text-color-secondary, #666)"></u-icon>
        </view>
      </view>
      
      <!-- 内容区域 -->
      <view class="modal__body" :class="{ 'modal__body--scrollable': scrollable }">
        <slot></slot>
      </view>
      
      <!-- 底部操作区 -->
      <view v-if="showFooter" class="modal__footer">
        <slot name="footer">
          <view class="modal__actions">
            <Button
              v-if="showCancel"
              type="outline"
              :size="actionSize"
              :disabled="loading"
              @click="handleCancel"
            >
              {{ cancelText || $t('common.cancel') }}
            </Button>
            <Button
              v-if="showConfirm"
              :type="confirmType"
              :size="actionSize"
              :loading="loading"
              @click="handleConfirm"
            >
              {{ confirmText || $t('common.confirm') }}
            </Button>
          </view>
        </slot>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, watch, nextTick } from 'vue'
import Button from './Button.vue'

interface Props {
  // 是否显示
  visible: boolean
  // 标题
  title?: string
  // 图标
  icon?: string
  // 图标颜色
  iconColor?: string
  // 位置
  position?: 'center' | 'top' | 'bottom' | 'left' | 'right'
  // 尺寸
  size?: 'sm' | 'md' | 'lg' | 'xl'
  // 是否全屏
  fullscreen?: boolean
  // 是否显示遮罩
  showMask?: boolean
  // 是否显示头部
  showHeader?: boolean
  // 是否显示底部
  showFooter?: boolean
  // 是否可关闭
  closable?: boolean
  // 点击遮罩是否关闭
  maskClosable?: boolean
  // 是否可滚动
  scrollable?: boolean
  // 是否有内边距
  padding?: boolean
  // 是否显示取消按钮
  showCancel?: boolean
  // 是否显示确认按钮
  showConfirm?: boolean
  // 取消按钮文本
  cancelText?: string
  // 确认按钮文本
  confirmText?: string
  // 确认按钮类型
  confirmType?: 'primary' | 'success' | 'warning' | 'error'
  // 操作按钮尺寸
  actionSize?: 'sm' | 'md' | 'lg'
  // 是否加载中
  loading?: boolean
  // 自定义样式
  customStyle?: Record<string, any>
  // 层级
  zIndex?: number
}

const props = withDefaults(defineProps<Props>(), {
  position: 'center',
  size: 'md',
  showMask: true,
  showHeader: true,
  showFooter: false,
  closable: true,
  maskClosable: true,
  scrollable: true,
  padding: true,
  showCancel: true,
  showConfirm: true,
  confirmType: 'primary',
  actionSize: 'md',
  zIndex: 1000
})

interface Emits {
  'update:visible': [visible: boolean]
  close: []
  cancel: []
  confirm: []
  maskClick: []
}

const emit = defineEmits<Emits>()

// 计算属性
const modalStyle = computed(() => {
  return {
    zIndex: props.zIndex,
    ...props.customStyle
  }
})

// 监听显示状态变化
watch(() => props.visible, (newVisible) => {
  if (newVisible) {
    // 显示时禁止页面滚动
    document.body.style.overflow = 'hidden'
  } else {
    // 隐藏时恢复页面滚动
    document.body.style.overflow = ''
  }
})

// 事件处理
const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}

const handleCancel = () => {
  emit('cancel')
  if (!props.loading) {
    handleClose()
  }
}

const handleConfirm = () => {
  emit('confirm')
}

const handleMaskClick = () => {
  emit('maskClick')
  if (props.maskClosable && !props.loading) {
    handleClose()
  }
}

// 阻止事件冒泡
const stopPropagation = (e: Event) => {
  e.stopPropagation()
}
</script>

<style lang="scss" scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: v-bind('props.zIndex');
}

.modal__mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
  
  &--transparent {
    background: transparent;
    backdrop-filter: none;
  }
}

.modal__container {
  position: relative;
  background: var(--card-bg-color, #ffffff);
  border-radius: 16rpx;
  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
  max-height: 80vh;
  overflow: hidden;
  animation: slideIn 0.3s ease;
  
  // 位置样式
  &--center {
    margin: 32rpx;
  }
  
  &--top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0 0 16rpx 16rpx;
    animation: slideInFromTop 0.3s ease;
  }
  
  &--bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 16rpx 16rpx 0 0;
    animation: slideInFromBottom 0.3s ease;
  }
  
  &--left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 0 16rpx 16rpx 0;
    animation: slideInFromLeft 0.3s ease;
  }
  
  &--right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 16rpx 0 0 16rpx;
    animation: slideInFromRight 0.3s ease;
  }
  
  // 尺寸样式
  &--sm {
    width: 600rpx;
    min-height: 200rpx;
  }
  
  &--md {
    width: 700rpx;
    min-height: 300rpx;
  }
  
  &--lg {
    width: 800rpx;
    min-height: 400rpx;
  }
  
  &--xl {
    width: 900rpx;
    min-height: 500rpx;
  }
  
  &--fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  
  &--no-padding {
    .modal__body {
      padding: 0;
    }
  }
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 32rpx 24rpx;
  border-bottom: 2rpx solid var(--border-color-light, #f0f0f0);
}

.modal__title {
  display: flex;
  align-items: center;
  gap: 12rpx;
  flex: 1;
}

.modal__title-text {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-color, #333333);
  line-height: 1.4;
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  transition: all 0.2s ease;
  cursor: pointer;
  
  &:hover {
    background: var(--bg-color-light, #f8f9fa);
  }
  
  &:active {
    transform: scale(0.95);
  }
}

.modal__body {
  padding: 32rpx;
  
  &--scrollable {
    overflow-y: auto;
    max-height: calc(80vh - 200rpx);
  }
}

.modal__footer {
  padding: 24rpx 32rpx 32rpx;
  border-top: 2rpx solid var(--border-color-light, #f0f0f0);
}

.modal__actions {
  display: flex;
  gap: 24rpx;
  justify-content: flex-end;
  
  :deep(.button) {
    min-width: 160rpx;
  }
}

// 动画
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20rpx);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes slideInFromTop {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideInFromBottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

// 响应式设计
@media (max-width: 750rpx) {
  .modal__container {
    &--sm {
      width: calc(100vw - 64rpx);
    }
    
    &--md {
      width: calc(100vw - 64rpx);
    }
    
    &--lg {
      width: calc(100vw - 32rpx);
    }
    
    &--xl {
      width: calc(100vw - 32rpx);
    }
  }
  
  .modal__header {
    padding: 24rpx 24rpx 20rpx;
  }
  
  .modal__title-text {
    font-size: 30rpx;
  }
  
  .modal__body {
    padding: 24rpx;
    
    &--scrollable {
      max-height: calc(80vh - 160rpx);
    }
  }
  
  .modal__footer {
    padding: 20rpx 24rpx 24rpx;
  }
  
  .modal__actions {
    gap: 16rpx;
    
    :deep(.button) {
      min-width: 120rpx;
      flex: 1;
    }
  }
}

// 暗色主题适配
[data-theme='dark'] {
  .modal {
    --card-bg-color: #1c1c1e;
    --text-color: #ffffff;
    --text-color-secondary: #8e8e93;
    --bg-color-light: #2c2c2e;
    --border-color-light: #38383a;
  }
  
  .modal__mask {
    background: rgba(0, 0, 0, 0.7);
  }
}
</style>